<template>
  <div class="table-box">
    <slot name="beforeTable"></slot>
    <!-- 表格 -->
    <div
      class="t-table"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      :element-loading-text="$t('正在加载')"
    >
      <!-- 表格列表 -->
      <div class="table-list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
          @select="select"
          @select-all="selectAll"
          style="width: 100%"
          header-row-class-name="table-header"
          :cell-class-name="rowClass"
          :header-cell-class-name="headerClass"
          :highlight-current-row="highlightCurrentRow"
          :row-class-name="getRowClass"
          border
          :row-key="getRowKeys"
          :max-height="maxHeight"
          :span-method="(e)=>spanMethodFunc(e, tableData.length)"
        >
          <el-table-column
            v-if="selection"
            :reserve-selection="true"
            type="selection"
            width="50"
            :fixed="selectionRight ? 'right' : 'left'"
            header-align="center"
            align="center"
            :selectable="selectable"
          ></el-table-column>
          <el-table-column v-if="showIndex" type="index" width="50" align="center" fixed="left"></el-table-column>
          <!-- 表头 -->
          <template v-for="(item, index) in tableColumnData">
            <el-table-column
              :fixed="item.fixed"
              :label="item.label"
              :width="item.absoluteWidth"
              :min-width="item.width"
              :type="item.type"
              :key="index"
              :prop="item.key"
              :align="item.align || (item.amount ? 'right' : 'left')"
            >
              <template slot="header"><slot name="header" :item="item"></slot></template>
              <template slot-scope="scope">
                <slot
                  v-if="item.custom"
                  :name="item.slotName || item.key"
                  :row="scope.row"
                  :index="scope.$index"
                ></slot>
                <slot v-else-if="item.operate" name="operate" :row="scope.row" :index="scope.$index"></slot>
                <!-- 金额显示千分位 -->
                <span v-else-if="item.amount" :title="moneyFor(scope.row[item.key])" class="text-ellipsis">
                  {{ scope.row[item.key] === null ? '-' : moneyFor(scope.row[item.key]) }}
                </span>
                <div v-else :title="scope.row[item.key]" class="text-ellipsis" :class="item.class">
                  {{ scope.row[item.key] || '-' }}
                </div>
              </template>
            </el-table-column>
          </template>

          <template slot="empty">
            <span v-if="noText"></span>
            <span v-else-if="!actionText">{{ $t('暂无数据') }}</span>
            <div v-else>
              <p>
                {{ $t('暂无数据') }}
              </p>
            </div>
          </template>
        </el-table>
      </div>

      <!-- 分页信息 -->
      <template v-if="showPagination">
        <div class="t-pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page.sync="currentPage"
            :page-sizes="pageSizes"
            :page-size="currentSize"
            :total="total"
            layout="total, prev, pager, next, sizes"
          >
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

import { moneyFor } from '@/utils/tools';

@Component({
  components: {},
})
export default class TableList extends Vue {
  moneyFor = moneyFor; // 显示千分位
  currentPage = 1;
  currentSize = 10;
  // 自定义列
  tableColumnData: any = [];

  @Prop({
    type: Array,
    required: false,
    default: () => [],
  })
  tableData;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  loading;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  selection;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  showIndex;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  customColumns;

  @Prop({
    type: Array,
    required: false,
    default: () => [],
  })
  columnData;

  @Prop({
    type: Number,
    required: false,
  })
  maxHeight;

  @Prop({
    type: String,
    required: false,
    default: '',
  })
  actionText;

  @Prop({
    type: String,
    required: false,
    default: '',
  })
  rowKey;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  pageChange;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  spanMethod;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  border;

  @Prop({
    type: Boolean,
    required: false,
    default: true,
  })
  showPagination;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  noText;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  padding;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  selectionRight;

  @Prop({
    type: Number,
    required: false,
    default: 0,
  })
  total;

  @Prop({
    type: Number,
    required: false,
    default: 5,
  })
  pageSize;

  @Prop({
    type: Number,
    required: false,
    default: 1,
  })
  pageIndex;

  @Prop({
    type: [],
    required: false,
    default: () => [5, 10, 20, 30],
  })
  pageSizes;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  handleSelectionChange;

  @Prop({ default: '' }) getRowClass: any; // 获取行类名

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  rowClick;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  select;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  selectAll;

  @Prop({ default: false }) highlightCurrentRow: any; // 行点击是否保持此行高亮

  @Prop({ default: () => {} }) selectable: any;

  get pageCount() {
    return Math.ceil(this.total / this.pageSize);
  }

  @Watch('columnData', { deep: true, immediate: true })
  initColumns() {
    this.currentSize = this.pageSize;
    this.currentPage = this.pageIndex;
    this.tableColumnData = this.columnData;
    this.$nextTick(()=> {
      (this.$refs.multipleTable as any).clearSelection();
    })
  }
  @Watch('pageIndex')
  initPageIndex() {
    this.currentPage = this.pageIndex;
  }
  @Watch('pageSize')
  initPageSize() {
    this.currentSize = this.pageSize;
  }
  mounted() {
    this.initColumns();
  }

  handleSizeChange(val) {
    // 切换条数时，默认回到第一页
    this.currentPage = 1;
    this.pageChange({
      pageSize: val,
      pageIndex: this.currentPage,
    });
  }

  handleCurrentChange(val) {
    this.pageChange({
      pageSize: this.currentSize,
      pageIndex: val,
    });
  }

  getRowKeys(row) {
    return this.rowKey ? row[this.rowKey] : row.id;
  }

  rowClass({ row, column, rowIndex, columnIndex }) {
    if (this.padding) {
      return 'cost-row-padding';
    }
  }

  headerClass({ row, column, rowIndex, columnIndex }) {
    if (this.padding) {
      return 'cost-herder-padding';
    }
  }

  spanMethodFunc(res, total) {
    return this.spanMethod && this.spanMethod(res, total);
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
